<template>
    <div class="home">
        <!-- 轮播图 -->
        <Carousel/>
        <!-- 搜索框 -->
        <Search/>
        <!-- 中间展示信息 -->
        <el-row :gutter="20">
            <el-col :span="20">
                <!-- 第一行的医院等级 -->
                <!--  自定义事件接受子组件传回的值 -->
                <Level @getLevel="getLevel"/>
                <!-- 第二行地区 -->
                <Areas @getArea="getArea"/>
                <!-- 医院卡片 -->
                <div class="hospital" v-if="hospitalList.length>0">
                    <Card class="item" v-for="(item,index) in hospitalList" :key="index" :hospitalInfo="item"/>
                </div>
                <el-empty v-else description="暂无数据"/>
                <!-- 底部分页器 -->
                <el-pagination
                  v-model:current-page="pageNo"
                  v-model:page-size="pageSize4"
                  :page-sizes="[10, 20, 30, 40]"
                  :background="true"
                  layout="prev, pager, next, ->,sizes, jumper, total"
                  :total="hospitalCount"
                  @current-change="getHospitalList"
                  @size-change="getHospitalList"
                />
            </el-col>
            <el-col :span="4">
                <Tip/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="home">
    import Carousel from './Carousel.vue'
    import Search from './Search.vue'
    import Level from "./category/Level.vue";
    import Areas from "./category/Areas.vue";
    import Card from "./Card.vue";
    import Tip from './Tip.vue'
    import {ref, onMounted} from 'vue'

    import { reqHospital } from '@/api/home'
    import type {Content, HospitalResponseData} from "@/api/home/type";

    // 分页器默认页
    const pageNo = ref<number>(1);
    // 默认每页显示条数
    const pageSize4 = ref<number>(10);

    // 存储医院等级数据，从子组件接受
    let hostype = ref<string>('');
    // 存储地区数据，从子组件接受
    let districtCode = ref<string>('');
    // 存储已有医院的数据
    let hospitalList = ref<Content>([]);
    // 医院个数
    let hospitalCount = ref<number>(0);

    // 使用二次封装的axios请求医院卡片数据
    const getHospitalList = async()=>{
        let result:HospitalResponseData = await reqHospital(pageNo.value,pageSize4.value,hostype.value,districtCode.value);
        if (result.code == 200){
            hospitalList.value = result.data.content
            hospitalCount.value = result.data.totalElements
        }
    }
    onMounted(()=>{
        // 获取医院列表
        getHospitalList();
    })

    // 监听子组件传来的等级数据
    const getLevel=(item:any)=>{
        hostype.value = item;
        // 再次获取医院列表
        getHospitalList();
    }
    // 监听子组件传来的地区数据
    function getArea(item:string){
        districtCode.value = item;
        // 再次获取医院列表
        getHospitalList();
    }
</script>

<style scoped>
    .home{
        margin-bottom: 20px;
    }
    .hospital{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item{
            width: 48%;
            margin: 10px 0;
        }
    }

</style>